<template>
  <div class="container">
    <el-card>
      <div class="newAdd" align="right">
        <el-button type="success" align="right" style="new_Add" @click="goother"
          ><i class="el-icon-edit" style="margin-right: 5px"></i
          >新增试题</el-button
        >
      </div>
      <el-form>
        <el-row align="right">
          <el-col :span="6">
            <el-form-item label-width="80px" label="学科">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value1"
                @change="numberChange"
                style="width: 100%"
              >
                <el-option
                  v-for="item in formData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="二级目录">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value8"
                style="width: 100%"
              >
                <el-option
                  v-for="item in twoLevelDirectory"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="标签">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value9"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tags"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="关键字">
              <el-input
                size="small"
                placeholder="请选择"
                v-model="input1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="试题类型">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value2"
                style="width: 100%"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="难度">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value3"
                style="width: 100%"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="方向">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value4"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="录入人">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="value5"
                style="width: 100%"
              >
                <el-option
                  placeholder="请选择"
                  v-for="(item, index) in creator"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="题目备注" width="100%">
              <el-input
                size="small"
                placeholder="请选择"
                v-model="input2"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="企业简称" width="100%">
              <el-input
                size="small"
                placeholder="请选择"
                v-model="input3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" height="30px">
            <el-form-item label="所属地区: " label-width="80px" width="100%">
              <el-select
                placeholder="请选择"
                @change="getCitys"
                v-model="value6"
                style="width: 48%; margin-right: 4%"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                v-model="value7"
                placeholder="请选择"
                style="width: 48%"
              >
                <el-option
                  v-for="(item, index) in city"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item inline label-width="80px">
              <el-button size="small" @click="empty"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="searchList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="forth"></el-tab-pane>
        <questionCheck ref="questionPane"  :search-result="{subjectID: this.value1, keyword: this.input1}" />
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import questionCheck from '@/module-hmmm/components/questions-check'
import { simple as getSubjectName } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
// import { choice } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/directorys'
import { simple as getTagName } from '@/api/hmmm/tags'
export default {
  components: {
    questionCheck
  },
  created () {
    this.getSubjectName()
    // this.getProviences()
    // this.getQuestionList()
  },
  methods: {
    async searchList () {
      // const { data } = await choice()
      // console.log(data)
      this.$refs.questionPane.getListChoice()
      // this.questionList = data.items
    },
    handleClick (activeName) {
      // console.log(activeName)
      this.$refs.questionPane.getListChoice(activeName.name)
    },
    async getSubjectName () {
      const data = await getSubjectName()
      console.log(data)
      this.formData = data.data
      console.log(this.formData)
    },
    getCitys (value) {
      this.city = citys(value)
      console.log(this.city)
    },
    async numberChange (value) {
      this.value8 = ''
      this.value9 = ''
      // console.log(value)
      // this.twoLevelDirectory = this.formData.filter(
      //   (item) => item.id === value
      // )
      const { data } = await simple({ id: this.formData.value })
      console.log(data)
      this.twoLevelDirectory = data
      const reg = await getTagName({ id: this.formData.value })
      console.log(reg)
      this.tags = reg.data
      // console.log(this.twoLevelDirectory)
    },
    goother () {
      this.$router.push({ path: '/questions/new' })
    },
    // async getQuestionList () {
    //   const data = await getQuestionList()
    //   // this.list = data
    //   console.log(data)
    // },
    empty () {
      this.value1 = null
      this.value2 = ''
      this.value3 = ''
      this.value4 = ''
      this.value5 = ''
      this.value6 = ''
      this.value7 = ''
      this.value8 = ''
      this.value9 = ''
      this.input1 = null
      this.input2 = ''
      this.input3 = ''
    }
  },
  data () {
    return {
      questionType, // 试题类型
      difficulty, // 难度
      direction, // 方向

      formData: [],
      provinces: provinces(),
      city: [],
      data: [],
      selectValue: '',
      activeName: 'first',
      twoLevelDirectory: [],
      tags: [],
      value: '',
      value1: null,
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      value9: '',
      list: [],
      input1: null,
      input2: '',
      input3: '',
      creator: ['超级管理员', '录入管理员']
      // direationData: [
      //   'o2o',
      //   '外包服务',
      //   '企业服务',
      //   '互联网金融',
      //   '企业咨询',
      //   '互联网',
      //   '电子商务',
      //   '其他'
      // ],
      // diffcuilty: ['简单', '一般', '困难']
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px;
  .el-row {
    // margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  label {
    font-size: 14px;
  }
  .newAdd {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .pagination {
    display: block;
    float: right;
    margin-top: 10px;
  }
}
</style>
